<template>
  <div class="order">
    <div class="order_title">
      当前订单
    </div>
    <div class="order_body" v-model="order_list" style="padding-bottom: 50px;">
      <h3>{{order_list.orderSubject}}</h3>
		<p><span class="lab">订单编号:</span><span>{{order_list.orderId}}</span></p>
			<mu-flex align-items="center">
				<span class="lab_time">预约时间:</span>
				<!-- <mu-date-input :disabled="isReadonly" @change="edit_ordertime"  v-model="order_list.orderTime" container="dialog" style="width: 180px;" actions> -->
					<!-- <mu-text-field :disabled="isReadonly" v-model="order_list.orderTime" @click="edit_ordertime" type="dateTime" style="width: 180px;"></mu-text-field> -->
				<!-- </mu-date-input> -->
				<mu-text-field v-model="order_list.orderTime" disabled ></mu-text-field>
				<mu-button v-if="order_list.orderTime && this.isEditTime" flat color="warning" @click="edit_time">修改</mu-button>
				<mu-button v-if="!this.isEditTime" flat color="primary" @click="save_time">保存</mu-button>
			</mu-flex>
		<p><span class="lab">预约地址:</span><span>{{agentAddress}}</span>
			<mu-button v-if="this.agentAddress" flat color="warning" @click="edit_agent">修改</mu-button>
		</p>
		<p v-if="order_list.serverType == 1"><span class="lab">服务类型:</span><span>自驾车前往代理商</span></p>
		<p v-if="order_list.serverType == 0"><span class="lab">服务类型:</span><span>代理商上门取车</span></p>
		<p v-if="order_list.serverType == 0 && employer "><span class="lab">取车人员姓名:</span><span>{{employer.name}}</span></p>
		<p v-if="order_list.serverType == 0 && employer "><span class="lab">联系方式:</span><span>{{employer.tell}}</span></p>
		<p v-if="order_list.serverType == 0"><span class="lab">上门取车地址:</span><span>{{order_list.visitAddress}}</span></p>
		<p><span class="lab">订单价格:</span><span>￥{{order_list.orderMoney}}</span>
			<mu-button flat color="primary" @click="show3 = !show3" v-if=" order_list.orderMoney">详情</mu-button>
			<mu-flex class="mu-transition-row row">
			<mu-expand-transition>
			<div v-show="show3">
				<div class="mu-transition-box box" v-if="baseMoney">基础价格:￥{{baseMoney}}</div>
				<div class="mu-transition-box box" v-if="visitMoney">上门取车服务费用:￥{{visitMoney}}</div>
				<div class="mu-transition-box box" v-if="operateMoney">营运车价格:￥{{operateMoney}}</div>
				<div class="mu-transition-box box" v-if="lessMoney">使用年限十年以下价格:￥{{lessMoney}}</div>
				<div class="mu-transition-box box" v-if="moreMoney">使用年限十年以上价格:￥{{moreMoney}}</div>
			</div>
			</mu-expand-transition>
			</mu-flex>
		</p>
		<p><span class="lab">订单状态:</span><span>{{order_list.orderState}}</span></p>
		<p><span class="lab" v-if="isRefuse">拒绝缘由:</span><span>{{order_list.rejectReason}}</span></p>
		<div v-if="this.order_state == 1" @click="to_payfor" class="to_check">
			<img src="/static/images/payment.png" class="icon_img"/>去付款</div>
				<div v-if="this.order_state == 2" class="to_wait">等待配单</div>
				<div v-if="this.order_state == 10" class="to_wait">等待代理商确认</div>
			<div v-if="this.order_state == 3 && this.serverType==1" @click="to_checkcar" class="to_check">配单成功,去检车</div>
			<div v-if="this.order_state == 3 && this.serverType==0" class="to_check">配单成功,等待代理商上门取车</div>
			<div v-if="this.order_state == 4" @click="to_evaluate" class="to_check">完成检车</div>
			<div v-if="this.order_state>0 && this.order_state < 4 || this.order_state==10 " @click="to_cancel" class="to_cancel">取消订单</div>

		</div>
		<mu-dialog title="提示信息" width="360" :open.sync="openSimple">
			检车是否已完成？
			<mu-button slot="actions" flat @click="closeSimpleDialog">取消</mu-button>
			<mu-button slot="actions" flat color="primary" @click="goSuccess">确定</mu-button>
		</mu-dialog>
		
		<mu-dialog title="提示信息" width="360" :open.sync="openSimple3">
			{{msg}}
			<mu-button slot="actions" flat color="primary" @click="closeSimpleDialog3">关闭</mu-button>
		</mu-dialog>
		
		<mu-dialog title="提示信息" width="360" :open.sync="openSimple2">
			确定取消订单吗?
			<mu-button slot="actions" flat @click="closeSimpleDialog2">取消</mu-button>
			<mu-button slot="actions" flat color="primary" @click="goSuccess2">确定</mu-button>
		</mu-dialog>
		
		<div class="alert-demo-wrapper">
			<mu-alert color="warning" @delete="alert1 = false" delete v-if="alert1" transition="mu-scale-transition">
				<mu-icon left></mu-icon>没有订单啊，快去下单吧~
				<mu-button flat color="primary" @click="to_home">前往</mu-button>
			</mu-alert>
		</div>
    <foot-nav></foot-nav>
  </div>
</template>

<script>
  import footNav from '../../components/common/foot'

  export default {
    name: "order_list",
    components: {
      footNav
    },
    data() {
      return {
				show3: false,
				isEditTime: true,
				alert1: false,
				isRefuse: false,
				openSimple: false,
				openSimple2: false,
				openSimple3: false,
				isReadonly: true,
				msg: '',
				baseMoney: '',
				visitMoney: '',
				operateMoney: '',
				lessMoney: '',
				moreMoney: '',
						order_list: {},
						old_time: undefined,
						agentAddress: "",
						order_state: 0,
				serverType: '',
				employer: undefined,
				showCircular: true
			}
    },
    created() {
      this.$ajax.get("/check-car/app/check/userOrders?type=0", {}).then((res) => {
				if(res.data.code == 500){
					this.alert1=true
				}else if(res.data.code ==401){
						setTimeout(this.$router.push({name: 'login'}),3000);
						this.$toast.info("登陆失效，请重新登陆");
				}
        else if (res.data.code == 200) {
					console.log(res.data)
            this.order_list = res.data.data[0].orderEntity;
			this.baseMoney = res.data.data[0].agentEntity.basePrice
			if(res.data.data[0].employerEntity){
				this.employer = res.data.data[0].employerEntity
			}
			if(res.data.data[0].orderEntity.useCharacter == 1){
				// 基础服务
				this.operateMoney = res.data.data[0].agentEntity.operatePrice
			}
			this.serverType = res.data.data[0].orderEntity.serverType
			if(res.data.data[0].orderEntity.serverType == 0){
				// 上门取车服务
				this.visitMoney = res.data.data[0].agentEntity.visitPrice
			}
			if(res.data.data[0].orderEntity.useYears == 0){
				// 十年以下
				this.lessMoney = res.data.data[0].agentEntity.lessPrice
			}else if(res.data.data[0].orderEntity.useYears == 1){
				// 十年以上
				this.moreMoney = res.data.data[0].agentEntity.morePrice
			}
			this.old_time = this.order_list.orderTime
            let alipayNotifyEntity = res.data.data[0].alipayNotifyEntity;
            this.agentAddress = res.data.data[0].agentEntity.agentAddress;
            this.order_state = res.data.data[0].orderEntity.orderState;
						switch (this.order_list.orderState) {
							case 1:
								this.order_list.orderState = "下单成功";
								break;
							case 2:
								this.order_list.orderState = "付款成功";
								break;
							case 3:
								this.order_list.orderState = "配单成功";
								break;
							case 4:
								this.order_list.orderState = "已开始检车";
								break;
							case 5:
								this.order_list.orderState = "订单完成";
								break;
							case 6:
								this.order_list.orderState = "评论完成";
								break;
							case 7:
								this.order_list.orderState = "订单拒绝";
								this.isRefuse=true;
								break;
							case 10:
								this.order_list.orderState = "订单修改，等待代理商确认";
								break;
							default :
								this.order_list.orderState = '未知'
						}
          }
      });
    },
    methods:{
			to_home(){
				this.$router.push({name:'agent',})
			},
      to_payfor(){
        this.$router.push({name:'order',query:{orderId: this.order_list.orderId}})
      },
      to_checkcar(){
        this.$router.push({name:'check_car',query:{orderId: this.order_list.orderId}})
      },edit_agent(){
				if(this.order_list.orderState == '已开始检车'){
					this.openSimple3=true
					this.msg="已开始检车，不可修改"
				}else{
					this.$router.push({name:'agent',query:{orderId: this.order_list.orderId}})
				}
				
			},to_evaluate(){
				this.openSimple=true
				this.msg= '检车是否已完成？'
			},closeSimpleDialog(){
				this.openSimple=false
				
			},closeSimpleDialog3(){
				this.openSimple3=false
				window.location.reload()
			},
			goSuccess(){
				this.openSimple=false
				this.$router.push({name:'evaluate',query:{orderId: this.order_list.orderId}})
			},to_cancel(){
				this.openSimple2=true
			},closeSimpleDialog2(){
				this.openSimple2=false
			},goSuccess2(){
				this.openSimple2=false
				const loading = this.$loading({
					// ...options
					"text":"处理中"
				});
				this.$ajax.get("/check-car/app/check/cancelOrder?orderId="+this.order_list.orderId, {
				}).then((res) => {
					if(res.data.code == 200){
						this.msg= res.data.msg
						
					}else if(res.data.code == 500){
						this.msg= res.data.msg
					}else{
						this.msg= '未知异常!'
					}
					loading.close();
					this.showCircular=false
					this.openSimple3=true
				})
				
			},
			/**
			 * 修改时间
			 */
			edit_time(){
				if(this.order_list.orderState == '已开始检车'){
					this.openSimple3=true
					this.msg="已开始检车，不可修改"
					return
				}
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate() 
				let h = date.getHours()
				let min = date.getMinutes()
				let chooseDate = [y + '年', m + '月', d + '日', h + '时', min + '分'] 
				let minDate = [y,m,d,h,m]
				let maxDate = [y+2,m,d,h,m]
				let dataObj = {
					type: 5,
					min: minDate,
					max: maxDate,
					showChinese: true,
					value: JSON.parse(JSON.stringify(chooseDate))
				}
				this.isEditTime = false
				this.$datepicker(dataObj).then((e) => {
					console.log(e)
					let y = e[0].replace('年','')
					let m = e[1].replace('月','')
					if(m.length == 1){
						m = '0'+m
					}
					let d = e[2].replace('日','')
					if(d.length == 1){
						d = '0'+d
					}
					let h = e[3].replace('时','')
					if(h.length == 1){
						h = '0'+h
					}
					let mm = e[4].replace('分','')
					if(mm.length == 1){
						mm = '0'+mm
					}
					this.order_list.orderTime = y+'-'+m+'-'+d+' '+h+':'+mm
				}).catch((e) => {
					console.log(e)
					let y = e[0].replace('年','')
					let m = e[1].replace('月','')
					if(m.length == 1){
						m = '0'+m
					}
					let d = e[2].replace('日','')
					if(d.length == 1){
						d = '0'+d
					}
					let h = e[3].replace('时','')
					if(h.length == 1){
						h = '0'+h
					}
					let mm = e[4].replace('分','')
					if(mm.length == 1){
						mm = '0'+mm
					}
					this.order_list.orderTime = y+'-'+m+'-'+d+' '+h+':'+mm
				})
				
			},
			/**
			 * 保存时间修改
			 */
			save_time(){
				// let date = JSON.stringify(this.order_list.orderTime+':00');
				this.$ajax.post("/check-car/app/check/updateOrder", {
					"orderId": this.order_list.orderId,
					"orderTime": this.order_list.orderTime+':00'
				}).then((res)=> {
					
						if (res.data.code ==200){
							this.isEditTime = true
							this.openSimple3=true
							this.msg=res.data.msg
						} else if(res.data.code ==500){
								this.openSimple3=true
								this.msg=res.data.msg
								this.order_list.orderTime = this.old_time
						}else{
							this.order_list.orderTime = this.old_time
							this.openSimple3=true
							this.msg='未知异常'
						}
				});
			},toggleAlert () {
				this.alert1 = !this.alert1;
			}
    }
  }
</script>

<style scoped>
.row{
	text-align: center;
	float: left;
	margin-left: 100px;
}
.box{
	text-align: left;
}
  .order_title {
    line-height: 60px;
    text-align: center;
    background-color: #dddddd;
  }
  .order_body h3{
    text-align: center;
    padding: 0 10px;
  }
  .order_body p {
    padding: 0 15px;
  }

  .lab {
    display: inline-block;
    width: 90px;
    margin-right: 7px;
    text-align: left;
  }
	.lab_time {
		display: inline-block;
		width: 100px;
		margin-left: 18px;
		margin-right: 12px;
		/* text-align: left; */
	}

  .to_check {
    margin: 20px auto 0;
    width: 90%;
    line-height: 60px;
    background-color: #00bcd4;
    text-align: center;
    color: #fafafa;
    font-size: 16px;
  }
	.to_wait {
		margin: 20px auto 0;
		width: 90%;
		line-height: 60px;
		background-color: #00bcd4;
		text-align: center;
		color: #DC143C;
		font-size: 16px;
	}
	.icon_img{
		margin-right: 10px;
		width: 20px;
		height: 20px;
    vertical-align: middle;
	}
  .to_cancel{
    margin: 20px auto 0;
    width: 90%;
    line-height: 60px;
    border: 1px solid #666;
    text-align: center;
    color: #666;
    font-size: 16px;
  }
	.button-wrapper {
		width: 90%;
		margin: 20px auto 0;
		line-height: 60px;
		border: 1px solid #666;
		margin-top: 10px;
		text-align: center;
		.mu-button{
			margin: 15px;
			margin-left: 10px;
			
		}
	}
	.button_font{
		font-size: 20px;
	}
	
.alert-demo-wrapper {
  width: 100%;
  > .mu-alert {
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  > .mu-button {
    margin: 0 auto;
    display: block;
  }
}

.mu-scale-transition-enter-active,
.mu-scale-transition-leave-active {
  transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), opacity .45s cubic-bezier(0.23, 1, 0.32, 1);
  backface-visibility: hidden;
}

.mu-scale-transition-enter,
.mu-scale-transition-leave-active {
  transform: scale(0);
  opacity: 0;
}
</style>
